<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Basic Controls</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Winforms, Mono, Visual Basic, basic controls, programming, tutorial">
<meta name="description" content="Basic Controls">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Basic Controls</h1>


<p>
This part of the Visual Basic Winforms programming 
tutorial will be about basic controls. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div> 

<p>
Winforms controls are basic building blocks of an application. Winforms 
has a wide range of various controls.
Buttons, check boxes, sliders, list boxes etc. Everything a programmer 
needs for his job.
In this section of the tutorial, we will describe several useful controls.
</p>


<h2>Label Control</h2>

<p>
<b class="keyword">Label</b> is a simple control for displaying text or images. 
It does not receive focus.
</p>


<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows lyrics of a song
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Dim lyrics As String = "Meet you downstairs in the bar and heard" &amp; vbNewLine &amp; _
"your rolled up sleeves and your skull t-shirt" &amp; vbNewLine &amp; _
"You say why did you do it with him today?" &amp; vbNewLine &amp; _
"and sniff me out like I was Tanqueray" &amp; vbNewLine &amp; _
"" &amp; vbNewLine &amp; _
"cause you're my fella, my guy" &amp; vbNewLine &amp; _
"hand me your stella and fly" &amp; vbNewLine &amp; _
"by the time I'm out the door" &amp; vbNewLine &amp; _
"you tear men down like Roger Moore" &amp; vbNewLine &amp; _
"" &amp; vbNewLine &amp; _
"I cheated myself" &amp; vbNewLine &amp; _
"like I knew I would" &amp; vbNewLine &amp; _
"I told ya, I was trouble" &amp; vbNewLine &amp; _
"you know that I'm no good"

    Public Sub New()

       Me.Text = "You know I'm no Good"
       Me.Size = New Size(300, 250)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim font As New Font("Serif", 10)

        Dim label As New Label
        label.Parent = Me
        label.Text = lyrics
        label.Font = font
        label.Location = New Point(10, 10)
        label.Size = New Size (290, 290)
       
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>


<p>
In our example, we show lyrics of a song in a label control. 
</p>

<pre class="explanation">
 Dim lyrics As String = "Meet you downstairs in the bar and heard" &amp; vbNewLine &amp; _
"your rolled up sleeves and your skull t-shirt" &amp; vbNewLine &amp; _ 
...
</pre>

<p>
We define a multi line text. Unlike in C#, Python or Ruby, there is no simple construct 
to create a multi line text in Visual Basic language. To create a multi line text in 
Visual Basic, we use the <b class="keyword">vbNewLine</b> print constant, the <b class="keyword">+</b>
concatenation character and the <b class="keyword">_</b> line termination character. 
</p>

<pre class="explanation">
 Dim label As New Label
</pre>

<p>
<b class="keyword">Label</b> control is created.
</p>

<pre class="explanation">
 label.Text = lyrics
</pre>

<p>
We set text for the label.
</p>

<pre class="explanation">
 Dim font As New Font("Serif", 10)
 ...
 label.Font = font
</pre>

<p>
The font of the text of the label is set to Serif, 10px. 
</p>


<br>
<img src="/img/gui/vbwinf/label.png" alt="Label">
<div class="figure">Figure: Label</div>


<h2>CheckBox</h2>

<p>
<b class="keyword">CheckBox</b> is a control that has two states. 
On and Off. It is a box with a label or an image.  If the CheckBox is 
checked, it is represented by a tick in a box. A CheckBox can be 
used to show/hide splashscreen at startup, toggle visibility of a toolbar etc.
</p>

<pre class="code">

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program toggles the title of the
' window with the CheckBox control
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Public Sub New

       Me.Text = "CheckBox"
       Me.Size = New Size(220, 170)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim cb As New CheckBox
        cb.Parent = Me
        cb.Location = New Point(30, 30)
        cb.Text = "Show Title"
        cb.Checked = True

        AddHandler cb.CheckedChanged, AddressOf Me.OnChanged
        
    End Sub

    Private Sub OnChanged(ByVal sender As Object, ByVal e As EventArgs)
    
        If sender.Checked
            Text = "CheckBox"
        Else 
            Text = ""
        End If

    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class

</pre>

<p>
Our code example shows or hides the title of the window depending on it's state. 
</p>

<pre class="explanation">
 Dim cb As New CheckBox
</pre>

<p>
<b class="keyword">CheckBox</b> control is created. 
</p>

<pre class="explanation">
 cb.Text = "Show Title"
 cb.Checked = True
</pre>

<p>
When the application starts, we show the title. 
And we set the <b class="keyword">CheckBox</b> control to checked state. 
</p>

<pre class="explanation">
 AddHandler cb.CheckedChanged, AddressOf Me.OnChanged
</pre>

<p>
When we click on the  <b class="keyword">CheckBox</b> control, the 
<b class="keyword">CheckedChanged</b> event is triggered.
We react with the <b class="keyword">OnChanged</b> method to this particular event.
</p>

<pre class="explanation">
 If sender.Checked
     Text = "CheckBox"
 Else 
     Text = ""
 End If
</pre>

<p>
Here we toggle the title of the window.
</p>

<br>
<img src="/img/gui/vbwinf/checkbox.png" alt="CheckBox">
<div class="figure">Figure: CheckBox</div>


<h2>ComboBox</h2>

<p>
<b class="keyword">ComboBox</b> is a control that combines a button or editable field and a drop-down list.
The user can select a value from the drop-down list, which appears at the user's request. 
If you make the combo box editable, then the combo box includes an editable field 
into which the user can type a value.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' In this program, we use the ComboBox
' control to select an option. 
' The selected option is shown in the
' Label component.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Private Dim label As Label

    Public Sub New

       Me.Text = "ComboBox"
       Me.Size = New Size(240, 240)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim cb As New ComboBox
        cb.Parent = Me
        cb.Location = New Point(50, 30)

        cb.Items.AddRange(New Object() {"Ubuntu", _
            "Mandriva", _
            "Red Hat", _
            "Fedora", _
            "Gentoo"}) 

        label = New Label
        label.Location = New Point(50, 140)
        label.Parent = Me
        label.Text = "..."

        AddHandler cb.SelectionChangeCommitted, AddressOf Me.OnChanged
        
    End Sub

    Private Sub OnChanged(ByVal sender As Object, ByVal e As EventArgs)
    
        label.Text = sender.Text

    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
Our code programming example shows a combobox with five items. The selected
item is shown in a label control. 
</p>


<pre class="explanation">
 Dim cb As New ComboBox
</pre>

<p>
<b class="keyword">ComboBox</b> control is created. 
</p>


<pre class="explanation">
 cb.Items.AddRange(New Object() {"Ubuntu", _
     "Mandriva", _
     "Red Hat", _
     "Fedora", _
     "Gentoo"}) 
</pre>

<p>
The <b class="keyword">ComboBox</b> control is filled with items. 
</p>

<pre class="explanation">
 AddHandler cb.SelectionChangeCommitted, AddressOf Me.OnChanged
</pre>

<p>
If we select an item from the combobox, the <b class="keyword">SelectionChangeCommitted</b> event
is triggered. 
</p>

<pre class="explanation">
 Private Sub OnChanged(ByVal sender As Object, ByVal e As EventArgs)
  
     label.Text = sender.Text

 End Sub
</pre>

<p>
Here the selected text from the combobox is copied to the label. 
</p>

<br>
<img src="/img/gui/vbwinf/combo.png" alt="ComboBox">
<div class="figure">Figure: ComboBox</div>


<h2>MonthCalendar</h2>

<p>
In the next example, we will show a <b class="keyword">MonthCalendar</b> control. 
The MonthCalendar control allows the user to select a date using a visual display.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' In this program, we use the MonthCalendar
' control to select a date.
' The selected date is shown in the
' Label control.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Private Dim label As Label

    Public Sub New

       Me.Text = "MonthCalendar"
       Me.Size = New Size(240, 240)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim calendar As New MonthCalendar
        calendar.Parent = Me
        calendar.Location = New Point(20, 20)

        label = New Label
        label.Location = New Point(40, 170)
        label.Parent = Me
        Dim dt As DateTime = calendar.SelectionStart
        label.Text = dt.Month &amp; "/" &amp; dt.Day &amp; "/" &amp; dt.Year

        AddHandler calendar.DateSelected, AddressOf Me.OnSel
        
    End Sub

    Private Sub OnSel(ByVal sender As Object, ByVal e As DateRangeEventArgs)
    
        Dim dt As DateTime = sender.SelectionStart
        label.Text = dt.Month &amp; "/" &amp; dt.Day &amp; "/" &amp; dt.Year

    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
In the example, we show a <b class="keyword">MonthCalendar</b> and a <b class="keyword">Label</b>.
The latter shows the currently selected date. 
</p>


<pre class="explanation">
 Private Sub OnSel(ByVal sender As Object, ByVal e As DateRangeEventArgs)

     Dim dt As DateTime = sender.SelectionStart
     label.Text = dt.Month &amp; "/" &amp; dt.Day &amp; "/" &amp; dt.Year
 
 End Sub
</pre>

<p>
When we select a date from the <b class="keyword">MonthCalendar</b>, the 
<b class="keyword">OnSel</b> method is called. 
The <b class="keyword">SelectionStart</b> property gets the 
start date of the selected range of dates. 
</p>


<br>
<img src="/img/gui/vbwinf/calendar.png" alt="MonthCalendar">
<div class="figure">Figure: MonthCalendar</div>


<h2>TextBox</h2>

<p>
The <b class="keyword">TextBox</b> control is used to display or accept some text. 
The text can be single or multiline. This control is also capable of password masking. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program demonstrates the 
' TextBox control. Text entered in the TextBox
' control is shown in a Label control.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Private Dim label As Label

    Public Sub New

       Me.Text = "TextBox"
       Me.Size = New Size(250, 200)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        label = New Label
        label.Parent = Me
        label.Text = "..."
        label.Location = New Point(60, 40)
        label.AutoSize = True

        Dim tbox As New TextBox
        tbox.Parent = Me
        tbox.Location = New Point(60, 100)
        
        AddHandler tbox.KeyUp, AddressOf Me.OnKeyUp
        
    End Sub

    Private Sub OnKeyUp(ByVal sender As Object, ByVal e As KeyEventArgs)
    
        Me.label.Text = sender.Text

    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
This example shows a text box and a label. The text that we key in the 
text box is displayed immediately in the label control. 
</p>


<pre class="explanation">
 label = New Label
 ...
 label.AutoSize = True
</pre>

<p>
The <b class="keyword">Label</b> control is created. The 
<b class="keyword">AutoSize</b> property ensures, that the Label
grows to show the text.  
</p>

<pre class="explanation">
 Dim tbox As New TextBox
 ...
 AddHandler tbox.KeyUp, AddressOf Me.OnKeyUp
</pre>

<p>
We plug in the <b class="keyword">KeyUp</b> event. When we release the key, 
<b class="keyword">OnKeyUp</b> method is called. 
</p>


<pre class="explanation">
 Private Sub OnKeyUp(ByVal sender As Object, ByVal e As KeyEventArgs)

     Me.label.Text = sender.Text

 End Sub
</pre>

<p>
In the <b class="keyword">OnKeyUp</b> method we update the label control 
with the text from the text box control. 
</p>


<br>
<img src="/img/gui/vbwinf/textbox.png" alt="TextBox">
<div class="figure">Figure: TextBox</div>

<hr class="btm">

<p>
We have finished chapter of the Visual Basic Winforms tutorial, 
dedicated to basic controls. 
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 2, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

